
<template>
    <div>
        <el-row type="flex" class="row-bg" v-show="!isediter">
            <el-col :span="22" :offset="2">
                保险责任项：
                <el-cascader :options="options" v-model="dataitemname">
                </el-cascader>
                <el-button type="primary" style="margin-left:50px;" @click="additem">添加</el-button>
            </el-col>

        </el-row>

        <div class="space20">
        </div>
        <el-collapse v-if="stylelist.length>0">
            <el-collapse-item :title="data.showname" :key="data.showname" v-for="data in stylelist ">

                <el-card class="box-card">
                    <div slot="header" class="card-heaer">
                        <span style="line-height: 36px;">{{data.showname}}</span>
                        <el-button style="float: right; margin-right:50px;" type="danger" @click="delectdata(data,data.id)">删除</el-button>
                        <el-button style="float: right; margin-right:50px;" type="primary" @click="addlistitem(data.fid,data.id)">新增一条</el-button>
                    </div>
                    <el-form :model="item" label-width="130px" ref="item" :inline="true" class="demo-ruleForm" :key="item.BILL_DATA_ID" v-for="(item,index) in even(list,data.id)">

                        <el-form-item label="项目代码" v-if="data.id!='201705110926265811'" :prop="'BILL_DATA_DETAIL_CODE'" :rules="{
                          required: data.id!='201705110926265811', message: '项目代码不能为空', trigger: 'blur'
                        }">
                            <el-input v-model="item.BILL_DATA_DETAIL_CODE"></el-input>
                        </el-form-item>
                        <el-form-item label="项目名称" :prop="'BILL_DATA_DETAIL_ZNAME'" :rules="{
                          required: true, message: '项目名称不能为空', trigger: 'blur'
                        }">
                            <el-input v-model="item.BILL_DATA_DETAIL_ZNAME"></el-input>
                        </el-form-item>
                        <el-form-item label="项目名称(英文)" v-if="data.id!='201705110926265811'" :prop="'BILL_DATA_DETAIL_ENAME'" :rules="{
                          required: data.id!='201705110926265811', message: '英文名称不能为空', trigger: 'blur'
                        }">
                            <el-input v-model="item.BILL_DATA_DETAIL_ENAME"></el-input>
                        </el-form-item>

                        <el-form-item label="项目描述" v-if="data.id!='201705110926265811'" :prop="'BILL_DATA_DETAIL_DETIAL'" :rules="{
                          required: data.id!='201705110926265811', message: '项目描述不能为空', trigger: 'blur'
                        }">
                            <el-input v-model="item.BILL_DATA_DETAIL_DETIAL"></el-input>
                        </el-form-item>
                        <el-form-item label="项目描述(英文)" v-if="data.id!='201705110926265811'" :prop="'BILL_DATA_DETAIL_EDETIAL'" :rules="{
                  required: data.id!='201705110926265811', message: '项目描述不能为空', trigger: 'blur'
                }">
                            <el-input v-model="item.BILL_DATA_DETAIL_EDETIAL"></el-input>
                        </el-form-item>

                        <el-form-item label="项目单价" v-if="data.id!='201705110926265811'" :prop="'BILL_DATA_DETAIL_PMONEY'" :rules="{
                          required: data.id!='201705110926265811',type:'string', message: '项目单价不能为空', trigger: 'blur'
                        }">
                            <el-input v-model="item.BILL_DATA_DETAIL_PMONEY"></el-input>
                        </el-form-item>
                        <el-form-item label="项目数量" v-if="data.id!='201705110926265811'" :prop="'BILL_DATA_DETAIL_COUNT'" :rules="{
                          required: data.id!='201705110926265811',type:'string', message: '项目数量不能为空', trigger: 'blur'
                        }">
                            <el-input v-model="item.BILL_DATA_DETAIL_COUNT"></el-input>
                        </el-form-item>
                        <el-form-item label="项目费用" v-if="item.BILL_DATA_DETAIL_COUNT!='' && item.BILL_DATA_DETAIL_PMONEY!='' &&　data.id!='201705110926265811'" :prop="'BILL_DATA_DETAIL_CMONEY'">
                            <el-input v-model="item.BILL_DATA_DETAIL_CMONEY" :disabled="true"></el-input>
                        </el-form-item>

                        <el-button style="float: right; margin-right:50px;" type="danger" @click="delectitem(item)">删除</el-button>

                    </el-form>
                </el-card>
            </el-collapse-item>
        </el-collapse>

    </div>
</template>
<script>
import {
    mapState
} from 'vuex';
import getid from '@/js/getid';
export default {
    props: {
        billdataid: {
            type: Number,
            default: ""
        }, isediter: {
            type: Boolean,
            default: false
        }


    },
    data() {
        return {
            dataitemname: [], //下列列表数据
            dataitem: [], //类型数据
            options: [], //下列列表数据源
            namevalue: "", //选择的数据名称
            stylelist: [],
            list: [] //BILL_DATA_DETAIL
            // bill:[]//最终账单数据

        };
    },
    watch: {
        list: {
            handler: function(val, oldval) {
                if (val.length < 0) {
                    return;
                }

                for (var i = 0; i < val.length; i++) {
                    this.list[i].BILL_DATA_DETAIL_CMONEY = this.list[i].BILL_DATA_DETAIL_COUNT * this.list[i].BILL_DATA_DETAIL_PMONEY
                }

            },
            deep: true
        }
    },
    computed: mapState({
        bill: state => state.bill.bill
    }),
    methods: {
        even: function(numbers, key) {
            return numbers.filter(function(number) {


                if (number.DUTYITEM_ID == key && number.BILL_DATA_DETAIL_ISSHOW!="删除") {
                    return number;
                }

            })
        },
        delectdata(item, id) {
            //删除条，删除list中 id相同数据
           
           
            var index = this.stylelist.indexOf(item)
            if (index !== -1) {
                this.stylelist.splice(index, 1)
            }
             for (var i = 0; i < this.list.length; i++) {
              
                if( this.list.DUTYITEM_ID==id){
                      this.list[index].BILL_DATA_DETAIL_ISSHOW = "删除";
                }
            }
            var arry = [];
            for (var i = 0; i < this.list.length; i++) {
                if (this.list[i].DUTYITEM_ID != id) {
                    arry.push(this.list[i])

                }
            }
            this.list = arry;

            for (var i = 0; i < this.bill.length; i++) {
                if (this.bill[i].BILL_DATA_ID == this.billdataid) {
                    this.bill[i].BILL_DATA_DETAIL = this.list;

                } else {

                }
            }

        },
        delectitem(item) {
      
            var index = this.list.indexOf(item)
            if (index !== -1) {
                // this.list.splice(index, 1)
             
                this.list[index].BILL_DATA_DETAIL_ISSHOW = "删除";
            }
            
        },
        additem() {
            if (this.dataitemname.length == 0) {
                this.$alert('请先选择责任项', '提示', {
                    confirmButtonText: '确定',
                });
            } else {

                var findex = this.dataitemname[0];
                this.getvalue();
                for (var i = 0; i < this.stylelist.length; i++) {
                    if (this.stylelist[i].showname == this.namevalue) {
                        return;
                    }

                }

                this.stylelist.push({
                    showname: this.namevalue,
                    id: this.dataitemname[1],
                    fid: this.dataitemname[0]
                });
                this.dataitemname = [];

            }

        },
        addlistitem(fid, id) {
            this.list.push({
                BILL_DATA_DETAIL_ID: getid.getid(),
                BILL_DATA_ID: this.billdataid,
                BILL_DATA_DETAIL_ENAME: "",
                BILL_DATA_DETAIL_ZNAME: "",
                BILL_DATA_DETAIL_MONEY: 0,
                BILL_DATA_DETAIL_STATE: "正常",
                BILL_DATA_DETAIL_RELATION: "是",
                BILL_DATA_DETAIL_COUNT: 0,
                BILL_DATA_DETAIL_PMONEY: 0,
                BILL_DATA_DETAIL_CMONEY: 0,
                BILL_DATA_DETAIL_EDETIAL: "",
                DUTYITEM_ID: id,
                DUTYITEM_FID: fid
            })
        },
        getvalue() {
            for (var i = 0; i < this.options.length; i++) {
                if (this.options[i].value == this.dataitemname[0]) {

                    this.namevalue = this.options[i].label + "-";
                    for (var k = 0; k < this.options[i].children.length; k++) {
                        if (this.options[i].children[k].value == this.dataitemname[1]) {
                            this.namevalue += this.options[i].children[k].label;

                            return;

                        }
                    }

                }
            }
        },
        getfid(id) {

            for (var i = 0; i < this.list.length; i++) {
                if (this.list[i].DUTYITEM_ID == id) {

                    return this.list[i].DUTYITEM_FID;
                }

            }
        }
    },
    created() {
        for (var i = 0; i < this.bill[this.billdataid].BILL_DATA_DETAIL.length; i++) {
            if (typeof (this.bill[this.billdataid].BILL_DATA_DETAIL[i].arry) != "object") {

                this.bill[this.billdataid].BILL_DATA_DETAIL[i].arry = this.bill[this.billdataid].BILL_DATA_DETAIL[i].arry.split(",");
            }

        }
        this.list = this.bill[this.billdataid].BILL_DATA_DETAIL;

        var arry = this.bill[this.billdataid].BILL_DATA_DETAIL;
        //类型数组生成
        var s = new Set();

        var sname = new Set();
        for (var i = 0; i < arry.length; i++) {
            var showname = arry[i].DUTYITEM_NAME1 + "-" + arry[i].DUTYITEM_NAME;
            //将单价和数量转换成string
            arry[i].BILL_DATA_DETAIL_PMONEY = arry[i].BILL_DATA_DETAIL_PMONEY + "";
            arry[i].BILL_DATA_DETAIL_COUNT = arry[i].BILL_DATA_DETAIL_COUNT + "";
            s.add(arry[i].DUTYITEM_ID); // showlist[]
            sname.add(showname);
        }

        var arry = [];
        var sarry = Array.from(s);
        var snamearry = Array.from(sname);
        for (var i = 0; i < sarry.length; i++) {
            var obj = {};
            obj.showname = snamearry[i];
            obj.id = sarry[i];
            obj.fid = this.getfid(sarry[i]);
            arry.push(obj);
        }

        this.stylelist = arry;
        this.$http.get("DutyItem").then(response => {
            var data = response.body;
            this.options = data;
        }, response => {
            this.$notify.error({
                title: '网络错误',
                message: '网络错误'
            });
            this.loding = false;
        });

    }

}
</script>